<template>
  <div class="payrolluser" v-loading="page_loading">
    <div class="block" style="margin-bottom: 10px">
      <el-date-picker
        v-model="begin_time"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <span class="auxiliary">到</span>
      <el-date-picker
        v-model="end_time"
        type="datetime"
        placeholder="选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <div class="input-wrapper">
        <el-input v-model="merchant_no" placeholder="请输入商户号"></el-input>
      </div>
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <div class="table-wrapper">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="count"
          label="序号"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            {{(scope.$index + 1) + (page - 1) * offset}}
          </template>
        </el-table-column>
        <el-table-column
          prop="merchant_no"
          label="商户号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="company_name"
          label="公司名称"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="contact_name"
          label="联系人"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contact_phone"
          label="联系方式"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="balance"
          label="可用余额(元)"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="bond_fee"
          label="保证金(元)"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="freeze"
          label="冻结金额(元)"
          align="center"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="recharge"
          label="充值"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="success" @click="recharge" :id="tableData[scope.$index].id">充值</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-wrapper" v-show="tableData && tableData.length">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="offset"
      >
      </el-pagination>
    </div>
    <!--dialog-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>确认给该商户充值{{recharge_value}}元</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure_recharge">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "payrolluser",
    data(){
      return{
        tableData: [],
        begin_time:'',
        end_time:'',
        merchant_no: '', // 商户号
        page_loading: true, // 是否在请求表单数据
        offset: 10,
        page: 1,
        total: 0,
        transfer: { // 筛选条件中转变量
          begin_time: '',
          end_time: '',
          merchant_no: '',
        },
        totle: 0, // 总笔数
        totle_suc: 0, // 成功笔数
        sum: 0, // 总金额
        sum_suc: 0, // 成功总额
        recharge_done: '', // 充值逻辑继续执行的方法
        dialogVisible: false, // 是否显示对话框
        recharge_value: '' // 输入充值的金额
      }
    },
    created () {
      // 初始化表格
      this.send_table_data();
    },
    methods:{
      handleCurrentChange (val) {
        this.page = val;
        this.send_table_data();
      },
      recharge (e) {
        let id = '';
        if (e.target.localName === 'span') {
          id = e.target.parentNode.id;
        } else {
          id = e.target.id;
        }
        let that = this;
        this.ElementUIMsgBox.prompt('请输入充值金额(元)', '充值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^(?:\d+|\d+\.\d+)$/,
          inputErrorMessage: '请输入有效的金额',
          beforeClose (action, instance, done) {
            if (action === 'cancel') { // 关闭弹窗
              done(); // 关闭弹窗
              return false;
            }

            // 这里面的this不指向vue实例 而指向ElementUIMsgBox实例

            // 储存继续执行事件
            that.recharge_done = done;
            // 点击确定按钮弹出再次确认提示框
            that.dialogVisible = true;
            // 储存input框里面的值
            that.recharge_value = this.$refs.input.value;
          }
        }).then(({ value }) => {
          // 显示加载框
          this.page_loading = true;
          this.axios.post('admin?action=doDeposit', {
            token: localStorage['token'],
            id: id,
            balance: value * 100
          }).then((res) => {
            this.page_loading = false;
            if (res.data.code === 1) {
              this.send_table_data(); // 刷新数据
              return false;
            }
            if (res.data.code === -3 || res.data.code === -4 || res.data.code === -2) {
              // 删除token缓存
              localStorage['token'] = '';

              // 跳转到登录
              this.$router.replace({
                path: '/login'
              });

              return false;
            }

            // 充值失败进行提示
            this.ElementUIMsg({
              type: 'error',
              duration:2000,
              message: res.data.msg
            });
          }).catch(() => {

          });
        }).catch(() => {
          this.ElementUIMsg({
            type: 'info',
            duration:2000,
            message: '取消充值'
          });
        });
      },
      sure_recharge () {
        this.recharge_done(); // 继续走充值逻辑
        // 关闭再次确定弹窗
        this.dialogVisible = false;
      },
      query () {
        // 将表单的值赋值给中转变量
        this.transfer.begin_time = this.begin_time;
        this.transfer.end_time = this.end_time;
        this.transfer.merchant_no = this.merchant_no;

        this.page = 1;

        this.send_table_data();
      },
      send_table_data () {
        this.get_table_data({
          biz_type: 2,
          page: this.page,
          offset: this.offset,
          token: localStorage['token'],
          begin_time: this.transfer.begin_time, // 开始
          end_time: this.transfer.end_time, // 结束
          merchant_no: this.transfer.merchant_no, // 商户号
        });
      },
      get_table_data (option) { // 获取表格数据
        // 显示加载框
        this.page_loading = true;
        // 请求ajax
        this.axios.post('admin?action=merchant', option).then((res) => {
          // 关闭加载框
          this.page_loading = false;
          if (res.data.code === 1) {
            res.data.data.forEach((item) => {
              // 分转元
              item.balance = Number(item.balance) ? item.balance / 100 : 0;
              item.bond_fee = Number(item.bond_fee) ? item.bond_fee / 100 : 0;
              item.freeze = Number(item.freeze) ? item.freeze / 100 : 0;
            });

            this.total = res.data.totle;
            this.tableData = res.data.data;

            // 赋值上面统计
            this.totle =  res.data.totle; // 总笔数
            this.totle_suc = res.data.totle_suc; // 成功笔数
            this.sum = res.data.sum; // 总金额
            this.sum_suc = res.data.sum_suc; // 成功总额

            return false;
          }
          if (res.data.code === -3 || res.data.code === -4 || res.data.code === -2) {
            // 删除token缓存
            localStorage['token'] = '';

            // 跳转到登录
            this.$router.replace({
              path: '/login'
            });
          }

          // 清空数据
          this.tableData = [];
        }).catch(() => {

        });

      }
    }
  }
</script>

<style scoped>
  .block{
    padding: 20px 0 20px 20px;
    background-color: #e8e8e8;
  }
  .select{
    width: 140px;
    display: inline-block;
    vertical-align: top;
  }
  .select > .form-control {
    height: 40px;
  }
  .auxiliary {
    font-size: 14px;
  }
  .table-wrapper {
    padding: 0 20px;
  }
  .pagination-wrapper {
    margin: 0 20px;
    padding: 20px 0;
    text-align: center;
    background-color: #fff;
  }
  .input-wrapper {
    display: inline-block;
    width: 140px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 192px;
  }
</style>
